<!DOCTYPE html>
<html>
<meta charset="utf-8">
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="signupForm">		
							<div class="form-group">
								<label class="col-sm-3 control-label">姓名：</label>
								<div class="col-sm-8">

									<input type="hidden" name="roleIds" id="roleIds">
									<input id="name" class="form-control" type="text" name="name" >
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">用户名：</label>
								<div class="col-sm-8">
									<input id="username" class="form-control"
										type="text" name="username" >
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">密码：</label>
								<div class="col-sm-8">
									<input id="password" class="form-control"
										type="password" name="password" >
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">E-mail：</label>
								<div class="col-sm-8">
									<input id="email" class="form-control"
										type="email" name="email" >
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">状态:</label>
								<div class="col-sm-8">
									<label class="radio-inline"> <input type="radio"
										 value="1" name="status" /> 正常
									</label> <label class="radio-inline"> <input type="radio"
										 value="0"  name="status" /> 禁用
									</label>
								</div>
							</div>		
							<div class="form-group">
								<label class="col-sm-3 control-label">角色</label>
								<div class="col-sm-8">
									<label class="checkbox-inline"th:each="role:${list}">
										<input name="role" type="checkbox" th:value="${role.roleId}" th:text="${role.roleName}"
										>
									</label>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-8 col-sm-offset-3">
									<button type="submit" class="btn btn-primary">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

	</div>
	<div th:include="include::footer"></div>
</body>
<script>
	//设置默认的被validator管理的方法
	$.validator.setDefaults({
		submitHandler:function () {
			save();
        }
	})
	//使用validate
	$(function () {

	    $('#signupForm').validate({
			rules:{
			    name:{
			        required:true
				},
				username:{
			        required:true,
					minlength:4,
					remote:{
			            url:'/sys/user/hasUser',
						data:{
			                username:function () {
								return $('#username').val();
                            }
						},dataType:'json',
                        type:'get'
					}
				}
			},
			messages:{
			      name:{
			          required:"用户名不能为空"
				  },
				username:{
			          required:"用户名不能为空",
					  minlength:"用户名不能少于4位",

					  remote:"用户名已存在"

				}
			}
		})

    })
	function save() {
		//在提交之前先获取复选框中被选中的赋给form表单中的有一个属性

		getSelectId();
		$.post(
		    "/sys/user/save",
			$('form').serialize(),
			function (data) {

                 if(data.code==200){
                     parent.layer.close(parent.layer.getFrameIndex(window.name));
                     parent.reload();
				 }else{
                     parent.layer.alert(data.msg);
				 }
            },"json"
		)
    }
    function getSelectId() {
	    //定义一个roleIds数组
		var roleIds=[];
		//获取所有input zhong name =role的被选中的
		$('input[name=role]:checked').each(function (i) {
		    //用push的方法把它放入数组中
			roleIds.push($(this).val());
        })
		//再赋值给定义好的input 表单中的隐藏表单方便提交
		$('#roleIds').val(roleIds);
    }
</script>
</html>
